<template>
  <div id="app">
    <transition name="page"><router-view/></transition>
    <audio :src="music.mp3_path" autoplay ref="audio" @timeupdate="timeupdate" @canplay="oncanplay" @ended="onended"></audio>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  watch: {
    playstate (val) {
      if (val) {
        this.$refs.audio.play()
      } else {
        this.$refs.audio.pause()
      }
    },
    jumpTimeStamp (val, old) {
      var ss = Math.abs(val - old)
      if (ss > 3) {
        this.$refs.audio.currentTime = val
      }
    },
    index () {
      this.$store.commit('setplaystate', true)
    }
  },
  computed: {
    index () {
      return this.$store.state.index
    },
    music () {
      return this.$store.state.list[this.index]
    },
    playstate () {
      return this.$store.state.playstate
    },
    jumpTimeStamp () {
      return this.$store.state.jumpTimeStamp
    }
  },
  methods: {
    timeupdate (e) {
      this.$store.commit('setCurrtTamp', this.$refs.audio.currentTime || 0)
    },
    oncanplay (e) {
      this.$store.commit('setAudioTamp', this.$refs.audio.duration || 1)
    },
    onended () {
      this.$store.commit('setplaystate', false)
      this.$store.commit('setPlayIndex', '+')
    }
  }
}
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.player {
  &.page-enter-active, &.page-leave-active {
    transition: 300ms;
  }
  &.page-enter-active {
    transform: translateY(100%);
  }
  &.page-enter-to {
    transform: translateY(0);
  }
  &.page-leave-active {
    transform: translateY(0);
  }
  &.page-leave-to {
    transform: translateY(100%)
  }
}
</style>
